<template>
  <el-card class="userHistory">
    <!-- 头部 -->
    <div slot="header">
      <span>访客记录📝</span>
    </div>
    <!-- 头部 -->

    <!-- 筛选 -->
    <div class="qf-filters">
      <div class="left">
        <el-input
          v-model="params.uname"
          style="width: 300px"
          placeholder="请输入内容"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </el-input>
      </div>
      <div class="right">
        <el-date-picker
          v-model="params.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 筛选 -->

    <!-- 表格 -->
    <qf-table :tableData="tableData" :columns="columns"></qf-table>
    <!-- 表格 -->

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[params.pagesize, 20, 30, 40]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataTotal"
    >
    </el-pagination>
    <!-- 分页 -->
  </el-card>
</template>

<script>
import { getUserHistoryApi } from "@/api/user";

// import tableData from "~mock/users/history.js";
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);

export default {
  methods: {
    handleSearch() {
      // 只要搜索就从第一页开始看
      this.params.pagenum = 1;
      this.handleTableData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.handleTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 1 修改参数
      this.params.pagenum = val;
      // 2 请求接口
      this.handleTableData();
    },
    async handleTableData() {
      // await 会取出Promise里面成功或失败的数据赋值给res
      const res = await getUserHistoryApi(this.params);
      console.log("拿到接口数据拉：", res);
      this.tableData = res.data.list;
      this.tableDataTotal = parseInt(res.data.total);
    },
  },
  watch: {
    // params
    "params.date"(newData) {
      // console.log("仅仅日期数据变化触发：", newData);
      this.params.start_time = newData ? newData[0] : "";
      this.params.end_time = newData ? newData[1] : "";
      this.params.pagenum = 1;
      this.handleTableData();
    },
  },
  data() {
    return {
      params: {
        date: [],
        start_time: "",
        end_time: "",
        uname: "",
        pagenum: 1,
        pagesize: 5,
      },

      // tableData: tableData.data,
      tableData: [],
      tableDataTotal: 0,

      columns: [
        { title: "编号", field: "id" },
        { title: "用户", field: "username" },
        { title: "登录方式", field: "type" },
        { title: "登录城市", field: "city" },
        { title: "登录时间", field: "login_time" },
        { title: "上一次登录时间", field: "prev_login_time" },
      ],
    };
  },
  created() {
    this.handleTableData();
  },
};
</script>
